<template>
  <div>
    <t-popup
      style="width: 100%; height: 85vh"
      v-model="showPopupone"
      placement="bottom"
      :destroy-on-close="true"
      :round="true"
      @closed="close"
    >
      <div
        class="popup-content-tops"
        style="display: flex; align-items: center"
      >
        <t-search
          placeholder="请输入您要搜索内容"
          style="width: 100%"
          @submit="submit"
          @clear="clear"
        ></t-search>
        <span
          style="flex-wrap: nowrap; width: 40px; text-align: center"
          @click="showPopupone = false"
          >取消</span
        >
      </div>
      <div style="height: 62px"></div>
      <div style="height: 100%; overflow-y: auto">
        <t-radio-group
          :default-value="radio"
          class="radio-group-demo"
          @change="groupChangeFn"
        >
          <t-radio
            v-for="(item, index) in seleArr"
            :key="index"
            icon="line"
            name="radio"
            :value="item.id"
            :label="item.course_name || item.username"
            :ref="`radio_${item.id}`"
          />
        </t-radio-group>
      </div>
    </t-popup>
  </div>
</template>
    
    <script>
import dayjs from "dayjs";
import { setStorage, getStorage } from "@/utils/util";

export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    status: {
      type: Boolean,
      default: false,
    },
    selekey: {
      type: String,
      default: "course", //默认 course
    },
  },
  watch: {
    value: {
      handler(val) {
        this.showPopupone = val; 
        setTimeout(() => {
          this.scrollToRadio(this.radio);
        }, 1000);
      },
      immediate: true, // 立即执行一次
    },
  },
  data() {
    return {
      radio: 3, //选择内容 id
      showPopupone: false,
      seleArr: [], //选择的内容对象
      courseObj: {},
      seleObjs: {}, //选择到的数据
    };
  },
  mounted() {
    this.courseObj = JSON.parse(getStorage("courseObj"));
    this.clear();
    console.log(this.courseObj, this.selekey, "---------");
    this.seleArrts();
    setTimeout(() => {
      this.scrollToRadio(this.radio);
    }, 1000);
  },
  methods: {
    close() { 
      this.$emit("close");
      this.clear();
    },
    scrollToRadio(id) {
      const radioElement = this.$refs[`radio_${id}`]?.[0]?.$el; // 获取对应的 DOM 元素
      if (radioElement) {
        radioElement.scrollIntoView({
          behavior: "smooth", // 平滑滚动
          block: "center", // 滚动到视口中央
        });
      } else {
        console.warn(`未找到 id 为 ${id} 的 radio 元素`);
      }
    },
    clear(e) {
      this.seleArr = this.courseObj[this.selekey];
    },
    submit(e) { 
      let query = e.value;
      // this.seleArr=this.courseObj[this.selekey].filter(item=>item)
      this.seleArr = this.courseObj[this.selekey].filter((item) => {
        if (item.course_name) {
          return item.course_name.toLowerCase().includes(query.toLowerCase());
        }
        if (item.username) {
          return item.username.toLowerCase().includes(query.toLowerCase());
        }
      });

      // if(!this.seleArr.length) this.seleArr=this.courseObj[this.selekey]
    },
    groupChangeFn(e) {
      this.seleObjs = this.seleArr.find((item) => item.id == e);
      console.log(e, this.seleObjs);
      this.radio = this.seleObjs.id;
      this.scrollToRadio(this.radio);

      console.log(this.courseObj, this.radio, "--------radio");
      this.showPopupone=false
      this.$emit("change", this.seleObjs);
    },
    seleArrts() {
      this.seleArr = this.courseObj[this.selekey];
    },
  },
};
</script>
    
    <style>
.popup-content-tops {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background: #ffffff;
  padding: 10px 20px;
  box-sizing: border-box;
  right: 0;
  z-index: 2; /* 确保在伪元素之上 */
}
</style>